<template>
    <div class="header">
        <button @click="back">{{backText}}</button>
        <h1>{{title}}</h1>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from 'vue-property-decorator'

@Component
export default class Header extends Vue {
    // methods
    // 自定义事件
    @Emit('hback')
    private back() {
        // 返回值是自定义事件得默认是参数
        return '123'
    }

    // props
    @Prop({default: '我是头部', type: String})
    private title:string

    @Prop({default: '返回'})
    private backText:string

    // props: {
    //     title: {
    //         type:String,
    //         default: '我是头部'
    //     }
    // }
}
</script>

<style lang="scss" scoped>
.header {
    height: 50px;
    border-bottom: 1px solid #ccc;
  flex-shrink: 0;
  display: flex;

}
</style>